<template>
  <div class="home">
    <router-link to="/city">
    <button>{{city}}</button>
    </router-link>
   <div class="nav">
       <router-link class="item" to="/films/inTheaters">正在热映</router-link>
       <router-link class="item"  to="/films/commingSoon">即将上映</router-link>
     </div>
    
    <router-view></router-view>
   
  </div>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity'
import { computed } from '@vue/runtime-core'
import { useStore} from 'vuex'
export default {
 setup(){
   const store =useStore()
   const state =reactive({
      city:computed(()=>{
        return store.state.city
      })
   })
   
   const refsState =toRefs(state)
   return{
     ...refsState
   }
 }
 
}
</script>
<style scoped>
  .nav{
  line-height: 50px;
  border-bottom: 1px solid #333;
  display: flex;
  justify-content: space-around;
  
  }
  .router-link-active{
  color: orangered;
  border-bottom: 1px solid orangered;
}
.item{
  text-decoration: none;
}

</style>
